<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12 父子组件的数据传递</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <counter :num='11' @add='handleAdd'></counter>
        <counter :num='12' @add='handleAdd'></counter>
        <div>{{total}}</div>
    </div>

    <script>
        var counter = {
            props: ['num'],
            data: function () {
                return {
                    // 从父组件接收到了num这个数据，把num数据复制一份到子组件自己的data里面，就可以用子组件自己的numChange
                    numChange: this.num
                }
            },
            template: '<div @click="handleClick">{{numChange}}</div>',  //用子组件自己的numChange
            methods: {
                handleClick: function () {
                    //this.num ++  // 能够加 但是会[Vue warn]，因为改了父组件传过来的内容
                    this.numChange = this.numChange + 2
                    this.$emit('add', 2)
                }
            },
        }

        var vm = new Vue({
            el: "#app",
            data: {
                total: 23
            },
            methods: {
                handleAdd(step) {
                    this.total += step
                }
            },
            components: {
                counter,
            }
        })
    </script>
</body>

</html>